<template>
  <div class="met-sidebar" :style="{backgroundColor:app_tabBar.config.bodybgcolor}">
    <div class="column-list p-20">
      <a class="column-1" :style="{color:app_tabBar.config.firstcolor}">
        {{sidebar.column_list.title}}
      </a>
      <ul class="column-2">
        <li v-for="(item,index) in sidebar.column_list.list" :key="item.id" :index="index">
          <a @click="handleLink(item)" :style="{color:app_tabBar.config.firstcolor}">
            {{item.name}}
          </a>
          <ul class="column-3">
            <li v-for="(element,eIndex) in item.children" :key="element.id" :index="eIndex">
              <a @click="handleLink(item)" :style="{color:app_tabBar.config.secondcolor}">
                {{element.name}}
              </a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
    <div class="recommend p-20">
      <h3 class="title" :style="{color:app_tabBar.config.firstcolor}">{{sidebar.recommend.title}}</h3>
      <div v-if="sidebar.recommend.style==='product'">
        <ul class="product-list">
          <li v-for="item in sidebar.recommend.list" :key="item.id" class="li" @click="updateData(item)">
            <img class="img" mode="widthFix" :src="item.imgurl" />
            <h3 class="title" :style="{color:app_tabBar.config.firstcolor}">{{item.title}}</h3>
          </li>
        </ul>
      </div>
      <div v-else>
        <ul class="news-list">
          <li v-for="item in sidebar.recommend.list" :key="item.id" class="li" @click="updateData(item)">
            <h3 class="title" :style="{color:app_tabBar.config.firstcolor}">{{item.title}}</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { navigateToListPage } from '@/utils/index'
export default {
  computed: {
    ...mapGetters(['sidebar', 'app_tabBar'])
  },
  data() {
    return {}
  },
  methods: {
    handleLink(item) {
        const param = {
          id: item.id,
          classtype: item.classtype,
          module: item.module,
          name: item.name,
          bigclass:item.bigclass?item.bigclass:item.id
        }
      this.$store.dispatch('SetActiveColumn', param)
      if (item.module === '3') {
        navigateToListPage(param, this,1)
        wx.switchTab({
          url: '../../pages/product/main'
        })
      } else if (item.module === '2') {
        navigateToListPage(param, this,1)
        wx.switchTab({
          url: '../../pages/news/main'
        })
      }
    },
    updateData(item) {
      wx.showLoading({
        title: '加载中'
      })
      const param = {
        id: item.id,
        module: item.module
      }
      let name
      if (item.module === '3') {
        name = 'GetProductView'
      } else {
        name = 'GetNewsView'
      }
      this.$store.dispatch(name, param).then(response => {
        wx.hideLoading()
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.met-sidebar {
  padding: 10px 15px;

  .column-list {
    .column-1 {
      color: #444;
      font-size: 18px;
      line-height: 1.5;
    }
    .column-2 {
      padding-top: 10px;
      color: #848484;
      line-height: 1.5;
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
      ._li {
        width: 50%;
        padding-right: 15px;
      }
    }
    .column-3 {
      padding: 8px 0px;
      color: #a6a6a6;
      line-height: 1.5;
      font-size: 14px;
    }
  }
  .recommend {
    border: none;
    .title {
      flex: 1;
      font-size: 18px;
      line-height: 1.571429;
      color: #444;
      margin: 15px 0px;
    }
    .product-list {
      display: flex;
      flex-wrap: wrap;
      .li {
        width: 50%;
        text-align: left;
        padding: 0 15px;

        .img {
          width: 100%;
        }
        .title {
          font-size: 13px;
          line-height: 1.571429;
          color: #444;
          margin-bottom: 15px 0 15px 0;
        }
      }
    }
    .news-list {
      border: 1px solid #dcdcdc;
      margin-bottom: -1px;
      .li {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #dcdcdc;
        &:last-child {
          border: none;
        }
        .title {
          font-size: 15px;
          line-height: 1.571429;
          color: #444;
          margin: 0px;
        }
        .desc {
          font-size: 13px;
          color: #848484;
          line-height: 1.571429;
          height: 40px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
